<template>
	<view class="wrap area-b">
		<u-navbar title="充值"></u-navbar>
		<view class="grade-wrap">
			<view class="item padding bg-white" :class="{cur:cur===index}" v-for="(item,index) in grades" :key="index" @tap="pickAmount(index)">
				<text class="u-font-40">{{item}}</text><text class="text-xs">元</text>
			</view>
		</view>
		<view class="bg-white padding-lr margin-lr margin-tb-sm round input-wrap " :class="{cur:cur==-1}">
			<view class="padding-top-sm padding-bottom-sm flex align-center">
				<view class="text-price text-xxl"></view>
				<input type="number" v-model="money" placeholder="请输入金额" class="flex-sub  margin-lr" maxlength="8" @focus="cur=-1"/>
			</view>
		</view>
		<view class="margin-lr margin-top-lg margin-bottom-sm"><text class="text-lg text-bold">支付方式</text></view>
		<view class="pay-wrap">
			<view class="item bg-white" :class="{cur:modes[curMode].key==item.key}" v-for="(item , index) in modes" :key="index" @tap="curMode = index">
				<text class="pay-icon" :class="item.class"></text>
				<text class="title">{{item.name}}</text>
				<view class="radio" :class="{checked:modes[curMode].key==item.key}"></view>
			</view>
		</view>
		
		<!-- <view class="padding-lr text-sm">
			手续费：¥0.00,预计一个工作日到账
		</view> -->
		<view class="padding-top-xl padding-lr-xl">
			<view class="padding-lr-xl">
				<button class="cu-btn bg-orange shadow round lg block " @tap="recharge">立即充值</button>
			</view>
		</view>
		<view class="footnav text-center text-grey">
			<view class="padding-lr-sm" @tap="service">
				<view class="text-sm margin-top-xs">联系客服</view>
			</view>
			<navigator hover-class="none" url="/pages/wallet/detail?type=0" class="padding-lr-sm solid-left">
				<view class="text-sm margin-top-xs">充值记录</view>
			</navigator>
		</view>
		<view class="cu-modal" :class="{show:showModel}">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
				</view>
				<view class="padding-xl">
					您是否充值完成?
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="showModel=!showModel">未完成</button>
						<button class="cu-btn bg-green margin-left" @tap="confirm">已完成</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {jumpTo, toast} from "@/utils/util.js"
	import {STAFF} from "@/utils/constant.js"
	import walletAPI from "@/api/wallet.js"
	import {mapGetters,mapActions} from "vuex"
	import { ConversationType } from "@/entity/ConversationType"
	export default {
		data() {
			return {
				cur:0,
				grades:[100,500,1000,2000,5000,10000],
				modes: [{"name":"支付宝","provider":"alipay","key":1,"class":"iconfont icon-alipay text-blue"},{"name":"微信","provider":"wxpay","key":2,"class":"iconfont icon-wxpay text-green"}],
				curMode: 0,
				money:'',
				showModel:false,
			}
		},
		computed:{
			...mapGetters('user',['userInfo'])
		},
		methods: {
			...mapActions('wallet',['fetchAssets']),
			...mapActions('chat', ['setConversation']),
			pickAmount(index){
				this.cur=index
				this.money = this.grades[this.cur]
			},
			check(){
				if(!this.grades[this.cur]&&!this.money){
					return toast('请选择或输入充值金额')
				}
				if(!this.grades[this.cur]){
					if(this.money<0.1){
						return toast('最少充值金额为0.1元')
					}
					if(!(/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/.test(this.money))){
						return toast("金额错误,最多保留两位小数")
					}
				}
				return true
			},
			async recharge(){
				if(!this.check()){
					return
				}
				try{
					const res = await walletAPI.recharge({
						userId:this.userInfo.userId, 
						money:this.grades[this.cur]||this.money,
						payplatForm:this.modes[this.curMode].key,
					})
					// #ifdef H5
					this.showModel = true;
					// #endif
					// #ifdef APP-PLUS
						uni.showToast({
							title:'充值成功',
							duration:1000
						})
						await this.fetchAssets()
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					// #endif
				}catch(e){
					console.error(e)
					// #ifdef APP-PLUS
						uni.showToast({
							title:'未能完成充值',
							icon:'none'
						})
					// #endif
				}
				
				
				
			},
			confirm(){
				this.showModel = false;
				this.fetchAssets()
				uni.navigateBack()
			},
			service(){
				this.setConversation({
					id: '000000000',
					type: ConversationType.Single,
					avatar: '/static/logo.png',
					name: '快聊客服'
				})
				jumpTo(`/pages/room/single?id=000000000`)
			}
		},
		async onLoad() {
		}
	}
</script>
<style>
	page{
		background-color: #EEEEEE;
	}
</style>
<style lang="scss" scoped>
	.wrap{
		min-height: 100vh;
	}
	.grade-wrap{
		margin: 30rpx 30rpx 0rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		align-content: space-between;
		.item{
			width: 220rpx;
			height: 220rpx;
			margin-bottom: 15rpx;
			border-radius: 20rpx;
			border: 4rpx solid transparent;
			transition: border-color 0.2s ease-out;
			&.cur{
				border-color: #f37b1d;
			}
		}
	}
	.input-wrap{
		border: 4rpx solid transparent;
		transition: border-color 0.2s ease-out;
		&.cur{
			border-color: #f37b1d;
		}
	}
	.pay-wrap{
		margin: 0rpx 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		align-content: space-between;
		.item{
			display: flex;
			align-items: center;
			width: 330rpx;
			margin-bottom: 15rpx;
			border-radius: 20rpx;
			padding: 15rpx 30rpx;
			border: 4rpx solid transparent;
			transition: border-color 0.2s ease-out;
			.pay-icon{
				font-size: 60rpx;
			}
			.title{
				margin-left: 10rpx;
				flex:1;
			}
			&.cur{
				border-color: #f37b1d;
			}
			
		}
		
	}
	.radio {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		border: 4rpx solid #EEEEEE;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		transition: all 0.2s ease-out;
		&::after {
			font-family: "cuIcon";
			content: "\e645";
			color: #FFFFFF;
		}
	
		&.checked {
			border-color: transparent;
			background-color: #f37b1d;
		}
	}
	
	.footnav{
		position:fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
